<template>
    <div class="cont">
        <el-tabs v-model="activeName" class="demo-tabs" style="width: 100%; height: 100%;">
            <el-tab-pane label="平台账号" name="first" style="background-color: #F5F5F5;height: 100%;">
                <div class="echarts">
                    <div class="eachart1">
                      <input type="date" class="inp1" v-model="addusertime" >
                        <div id="main" style="width: 100%; height: 300px;"></div>
                    </div>
                    <div class="eachart2">
                      <input type="date" class="inp2" v-model="addvipusertime" >
                      <div id="mian" style="width: 100%; height: 300px;"></div>
                    </div>
                </div>
                <div class="sj">
                  <el-table :data="accountList" height="100%" style="width: 100%">
                    <el-table-column prop="userName" label="用户名" />
                    <el-table-column prop="nickName" label="账户" />
                    <el-table-column prop="tel" label="手机号" />
                    <el-table-column prop="memberNumber" label="会员编号" />
                    <el-table-column prop="vipName" label="会员等级" />
                    <el-table-column prop="memberPoints" label="会员积分" />
                </el-table>
                </div>
            </el-tab-pane>
            <el-tab-pane label="客户销量" name="second">
               <div class="second">
                  <div class="second-left">
                      <div class="left-header">
                        <input type="date" class="inp3" v-model="time">
                        <div id="ech" style="width: 500px; height: 250px;"></div>
                      </div>
                      <div class="left-body">
                        <el-table :data="tableData" height="100%" style="width: 100%;" >
                          <el-table-column prop="shopName" label="商户名称"/>
                          <el-table-column prop="contacts" label="用户名"/>
                          <el-table-column prop="tel" label="手机号" />
                          <el-table-column prop='salesVolume' label="销售情况(单)" />
                        </el-table>
                      </div>
                  </div>
                  <div class="second-right">
                    <div class="right-header">
                      <input type="date" class="inp3" v-model="Time">
                        <div id="ehr" style="width: 500px; height: 250px;"></div>
                      </div>
                      <div class="right-body">
                        <el-table :data="tabledate" height="100%" style="width: 100%;" >
                          <el-table-column prop="shopName" label="商户名称"/>
                          <el-table-column prop="contacts" label="用户名"/>
                          <el-table-column prop="tel" label="手机号" />
                          <el-table-column prop='salesVolume' label="销售情况(单)" />
                      </el-table>
                      </div>
                  </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="平台统计" name="third">
              <div class="third-header">
                <div class="echart">
                  <input type="date" class="inp3" v-model="timeday">
                  <div id="zhx1" style="width:400px;height: 300px;"></div>
                </div>
                <div class="echart">
                  <input type="date" class="inp3" v-model="ttme">
                  <div id="zhx2" style="width:400px;height: 300px;"></div>
                </div>
                <div class="echart">
                  <input type="date" class="inp3" v-model="timeMon">
                  <div id="zhx3" style="width:400px;height: 300px;"></div>
                </div>
              </div>
              <div class="third-body">
                <el-table :data="salesVolumeList" height="100%" style="width: 100%;" >
                    <el-table-column prop="shopName" label="商户名称"/>
                    <el-table-column prop="contacts" label="用户名"/>
                    <el-table-column prop="tel" label="手机号" />
                    <el-table-column prop='salesVolume' label="销售情况(单)" />
                </el-table>
              </div>
            </el-tab-pane>
            <el-tab-pane label="流水统计" name="fourth">
              <div class="fourth">
                  <div class="fourth-left">
                      <div class="left-header">
                        <input type="date" class="inp3" v-model="time1">
                        <div id="ild" style="width: 500px; height: 250px;"></div>
                      </div>
                      <div class="left-body">
                        <el-table :data="monthTIBList" height="300" style="width: 100%">
                          <el-table-column prop="shopName" label="商户名称" />
                          <el-table-column prop="contacts" label="联系人" />
                          <el-table-column prop="tel" label="手机号" />
                          <el-table-column prop="turnoverInBusiness" label="流水情况" />
                        </el-table>
                      </div>
                  </div>
                  <div class="fourth-right">
                    <div class="right-header">
                      <input type="date" class="inp3" v-model="time2">
                        <div id="olp" style="width: 500px; height: 250px;"></div>
                      </div>
                      <div class="right-body">
                        <el-table :data="dayTIBList" height="100%" style="width: 100%;" >
                          <el-table-column prop="shopName" label="商户名称"/>
                          <el-table-column prop="contacts" label="用户名"/>
                          <el-table-column prop="tel" label="手机号" />
                          <el-table-column prop='turnoverInBusiness' label="流水情况" />
                      </el-table>
                      </div>
                  </div>
                </div>
            </el-tab-pane>
        </el-tabs>
       </div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts';

import { GridComponent } from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import axios from 'axios';
const activeName = ref('first')
echarts.use([GridComponent, BarChart, CanvasRenderer]);
onMounted(async () => {
  //平台账户
    adduser();
    addvip();
    addaccount();
    //客户销量页面
    Moontable();
    Daytable();
    //平台统计
    sgc();
    day1();
    year1();
    //流水统计
    yul();
    ri1();
});
let BaseUrl='http://192.168.199.11:8001/ShoppingStreet';
//新增用户
let addusertime = ref('2024-08-06');
watch(addusertime,(newValue,oldValue)=>{

  adduser(newValue)
})
function adduser(value) {
  if(value == undefined){
    value = '2024-08-06'
  }
  axios.defaults.headers.common['token'] = localStorage.getItem("token");
  axios.post(BaseUrl+'/user/dayAddUser', {
    Time: value,
  }).then(res => {
    console.log(value);
    
      console.log(res.data.data.dayAddUser);
    let tableData = res.data.data.dayAddUser;
    const chartDom = document.getElementById('main');
    if (chartDom) {
      // 检查是否已经有图表实例，如果有则先销毁
      if (chartDom.myChart) {
        chartDom.myChart.dispose();
      }
      const myChart = echarts.init(chartDom);
      const option = {
        title: {
          text: '新增用户',
          subtext: '平台总用户 1000 人',
          left: 'left'
        },
        xAxis: {
          type: 'category',
          data: tableData.map(item => item.registerDay)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: tableData.map(item => item.total),
            type: 'bar',
            barWidth: 15,
            barCategoryGap: '50%',
            itemStyle: {
              borderRadius: [20, 20, 0, 0]
            }
          }
        ]
      };
      option && myChart.setOption(option);
      // 将图表实例存储在 DOM 元素上，以便下次检查和销毁
      chartDom.myChart = myChart;
    }
  }).catch(error => {
    console.error('添加用户图表初始化失败：', error);
  });
}
//新增会员
let addvipusertime = ref('2024-08-06');
watch(addvipusertime,(newValue,oldValue)=>{

  addvip(newValue)
})
function addvip(value){
  if(value == undefined){
    value = '2024-08-06'
  }
    axios.defaults.headers.common['token'] = localStorage.getItem("token");
    axios.post(BaseUrl+'/user/dayAddVipUser',{
      Time:value,
    }).then(res=>{
      let dayAddVipUser=res.data.data.dayAddVipUser;
    //图示
    let chartDom = document.getElementById('mian');
  let myChart = echarts.init(chartDom);
  let option = {
    title: {
      text: '新增会员', // 添加标题内容
      subtext:'平台总用户1000人',
      left: 'left' // 标题位置为居中
    },
    xAxis: {
      type: 'category',
      data:  dayAddVipUser.map(item => item.createTime)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data:dayAddVipUser.map(item => item.total),
        type: 'bar',
        barWidth:15,
        barCategoryGap: '50%',
        itemStyle: {
          borderRadius: [20, 20, 0, 0] // 设置柱状图顶部两个角为圆角
        }
      }
    ]
  };
  option && myChart.setOption(option);

})
}
//平台账户
  let pageSize = ref(10);
  let currentPage = ref(1);
let accountList=ref([]);
function addaccount(){
  axios.defaults.headers.common['token'] = localStorage.getItem("token");
    axios.post(BaseUrl+'/user/accountList',{
      pageIndex:currentPage.value,
      pageSize:pageSize.value,
    }).then(res=>{ 
      accountList.value = res.data.data.accountList;
})
}

//客户销量
//月销量
let Index=ref(1);
let Size=ref(4);
let limit=ref(10);
let time=ref('2024-08-06');
watch(time,(newValue,oldValue)=>{
  Moontable(newValue)
})
// function getYearMonth(dateString) {
//   const date = new Date(dateString);
//   const year = date.getFullYear();
//   const month = date.getMonth() + 1; // getMonth() 返回的月份是从0开始的，所以需要加1
//   return `${year}-${month}`;
// }
// // 使用示例
// const yearMonth = getYearMonth(time.value);
let tableData=ref([]);
function Moontable(value){
  if(value == undefined){
    value = '2024-08-06'
  }
  axios.defaults.headers.common['token'] = localStorage.getItem("token");
    axios.post(BaseUrl+'/shop/salesVolume',{
      pageIndex:Index.value,
      pageSize:Size.value,
      limit:limit.value,
      time:value,
    }).then(res=>{
      tableData.value=res.data.data.Moon.moonSVList;
      //月销量图
      let moonSVList = res.data.data.Moon.moonSVList;
      var chartDom = document.getElementById('ech');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
          title: {
              text: '月销量',
              left: 'left'
          },
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          series: [
              {
                  name: '月销量',
                  type: 'pie',
                  radius: [25, 100],
                  center: ['50%', '50%'],
                  roseType: 'radius',
                  itemStyle: {
                      borderRadius: 5
                  },
                  label: {
                      show: false
                  },
                  emphasis: {
                      label: {
                          show: true
                      }
                  },
                  data:moonSVList.map(item => ({
                      value: item.salesVolume,
                      name: item.shopName
                  }))
              }
          ]
      };
      option && myChart.setOption(option);
    })
}
//日销量
let tabledate=ref([]);
let index=ref(1);
let size=ref(20);
let Time=ref('2024-08-06');
watch(Time,(newValue,oldValue)=>{
  Daytable(newValue)
})
function Daytable(value){
  if(value == undefined){
    value = '2024-08-06'
  }
  axios.defaults.headers.common['token'] = localStorage.getItem("token");
    axios.post(BaseUrl+'/shop/salesVolume',{
      pageIndex:index.value,
      pageSize:size.value,
      limit:limit.value,
      time:value,
    }).then(res=>{
      tabledate.value=res.data.data.Moon.moonSVList;
      //日销量图
      let daySvList = res.data.data.Day.daySvList;
      let chartDo = document.getElementById('ehr');
      var myChar = echarts.init(chartDo);
      var optio;
      optio = {
          title: {
              text: '日销量',
              left: 'left'
          },
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          series: [
              {
                  name: '日销量',
                  type: 'pie',
                  radius: [25, 100],
                  center: ['50%', '50%'],
                  roseType: 'radius',
                  itemStyle: {
                      borderRadius: 5
                  },
                  label: {
                      show: false
                  },
                  emphasis: {
                      label: {
                          show: true
                      }
                  },
                  data:daySvList.map(item => ({
                      value: item.salesVolume,
                      name: item.shopName
                  }))
              }
          ]
      };
      optio && myChar.setOption(optio);
    })
}

//平台统计
//表
let salesVolumeList=ref([]);
let tiaole=ref(1);
let xm = ref(4);
let ttme = ref('2024-08-15')
watch(ttme,(newValue,oldValue)=>{
  sgc(newValue)
})
function sgc(value){
  if(value == undefined){
    value = '2024-08-06'
  }
  axios.defaults.headers.common['token'] = localStorage.getItem("token");
    axios.post(BaseUrl+'/shop/salesVolumeCount',{
      pageIndex:tiaole.value,
      pageSize:xm.value,
      limit:limit.value,
      time:value,
    }).then(res=>{
       salesVolumeList.value = res.data.data.salesVolumeList;
       //月
      let data = res.data.data.monthList;
       var chartDom2 = document.getElementById('zhx2');
      var myChartyear = echarts.init(chartDom2);
      var option;
      option = {
        title: {
              text: '月销量',
              left: 'left'
          },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.map(item => item.ordersday)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: data.map(item => item.total),
            type: 'line',
            areaStyle: {}
          }
        ]
      };
      option && myChartyear.setOption(option);
    })
}
//日
let timeday = ref('2024-08-06');
watch(timeday,(newValue,oldValue)=>{
  day1(newValue)
})
function day1(value){
  if(value == undefined){
    value = '2024-08-06'
  }
  axios.defaults.headers.common['token'] = localStorage.getItem("token");
    axios.post(BaseUrl+'/shop/daySvList',{
      // pageIndex:1,
      // pageSize:10,
      // limit:limit.value,
      time:value,
    }).then(res=>{
      let datae = res.data.data.dayList;
      const dayListData = datae;
        const keys = Object.keys(dayListData);
        const values = Object.values(dayListData);
  
      var chartDom1 = document.getElementById('zhx1');
      var myChartday = echarts.init(chartDom1);
      var option;
      option = {
        title: {
              text: '日销量',
              left: 'left'
          },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: keys
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: values,
            type: 'line',
            areaStyle: {}
          }
        ]
      };
      option && myChartday.setOption(option);
    })
}
//年
let timeMon = ref('2024-08-06');
watch(timeMon,(newValue,oldValue)=>{
  year1(newValue)
})
function year1(value){
  if(value == undefined){
    value = '2024-08-06'
  }
  axios.defaults.headers.common['token'] = localStorage.getItem("token");
    axios.post(BaseUrl+'/shop/yearSvList',{
      // pageIndex:1,
      // pageSize:10,
      limit:limit.value,
      time:value,
    }).then(res=>{
      let datae = res.data.data;
      var chartDom1 = document.getElementById('zhx3');
      var myChartday = echarts.init(chartDom1);
      var option;
      option = {
        title: {
              text: '年销量',
              left: 'left'
          },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: datae.map(item => item.ordermonth),
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: datae.map(item => item.total),
            type: 'line',
            areaStyle: {}
          }
        ]
      };
      option && myChartday.setOption(option);
    })
}

//流水统计
let index1=ref(1);
let size1=ref(10);
let limit1=ref(7);
//月
let time1=ref('2024-08-05');
watch(time1,(newValue,oldValue)=>{
  console.log(newValue);
  yul(newValue)
})
let monthTIBList = ref([])
function yul(value){
  if(value == undefined){
    value = '2024-08-06'
  }
  axios.defaults.headers.common['token'] = localStorage.getItem("token");
    axios.post(BaseUrl+'/shop/monthTIB',{
      pageIndex:index1.value,
      pageSize:size1.value,
      limit:limit1.value,
      time:value,
    }).then(res=>{
      monthTIBList.value=res.data.data.monthTIBList;
      //月流水图
      let monthTIB = res.data.data.monthTIB;
      var chartDom = document.getElementById('ild');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
          title: {
              text: '月流水',
              left: 'left'
          },
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          series: [
              {
                  name: '月销量',
                  type: 'pie',
                  radius: [25, 100],
                  center: ['50%', '50%'],
                  roseType: 'radius',
                  itemStyle: {
                      borderRadius: 5
                  },
                  label: {
                      show: false
                  },
                  emphasis: {
                      label: {
                          show: true
                      }
                  },
                  data:monthTIB.map(item => ({
                      value: item.turnoverInBusiness,
                      name: item.shopName
                  }))
              }
          ]
      };
      option && myChart.setOption(option);
    })
}
//日
let time2 = ref('2024-08-06');
watch(time2,(newValue,oldValue)=>{
  console.log(newValue);
  ri1(newValue)
})
let dayTIBList=ref([]);
function ri1(lit){
  if(lit == undefined){
    lit = '2024-08-06'
  }
  axios.defaults.headers.common['token'] = localStorage.getItem("token");
    axios.post(BaseUrl+'/shop/dayTIB',{
      // pageIndex:1,
      // pageSize:10,
      limit:limit1.value,
      time:lit,
    }).then(res=>{
      dayTIBList.value = res.data.data.dayTIBList;

      let dayTIB = res.data.data.dayTIB;
      var chartDom = document.getElementById('olp');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
          title: {
              text: '日流水',
              left: 'left'
          },
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          series: [
              {
                  name: '月销量',
                  type: 'pie',
                  radius: [25, 100],
                  center: ['50%', '50%'],
                  roseType: 'radius',
                  itemStyle: {
                      borderRadius: 5
                  },
                  label: {
                      show: false
                  },
                  emphasis: {
                      label: {
                          show: true
                      }
                  },
                  data:dayTIB.map(item => ({
                      value: item.turnoverInBusiness,
                      name: item.shopName
                  }))
              }
          ]
      };
      option && myChart.setOption(option);
    })

}
</script>
<style scoped lang="less">
.cont {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #F5F5F5;
    padding: 20px 5% 0;
    
}
:deep(.el-tabs__nav-wrap.is-scrollable){
        background-color: #fff;
    }
.echarts{
        width: 100%;
        height: 300px;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        .eachart1{
            width: 48%;
            height: 300px;
            background-color: #fff;
            border-radius: 10px;
            position: relative;
            .inp1{
              width: 30px;
              height: 35px;
              border: none;
              font-size: 26px;
              position: absolute;
              right: 20px;
              top: 16px;
              z-index: 3;
            }
        }
        .eachart2{
            width: 48%;
            height: 300px;
            background-color: #fff;
            border-radius: 10px;
            position: relative;
            .inp2{
              width: 30px;
              height: 35px;
              border: none;
              font-size: 26px;
              position: absolute;
              right: 20px;
              top: 16px;
              z-index: 3;
            }
        }
    }

  .sj{
        width: 100%;
        height: 240px;
        background-color: #fff;
        margin-top:2% ;
        margin-bottom: 30px;
        border-radius: 10px;
        position: relative;
        .foot{
            width: 100%;
            height: 10%;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            position: absolute;
            left: 0;
            bottom: 8px;
            .el-pagination{
                justify-content: center;
              }
            }
    }
   .second{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
      .second-left{
        width: 48%;
        height: 555px;
        background-color: #fff;
        border-radius: 10px;
       .left-header{
            width: 100%;
            height: 50%;
            position: relative;
            .inp3{
              width: 30px;
              height: 35px;
              border: none;
              font-size: 26px;
              position: absolute;
              right: 20px;
              top: 16px;
              z-index: 3;
            }
          }
          .left-body{
            width: 100%;
            height: 50%;
            position: relative;
            bottom: 10px;
            .foot{
              width: 100%;
              height: 10%;
              margin: 0 auto;
              display: flex;
              justify-content: center;
              position: absolute;
              left: 0;
              bottom: 0px;
              .el-pagination{
                  justify-content: center;
              }
          }
      }
    }
      .second-right{
        width: 48%;
        height: 555px;
        background-color: #fff;
        border-radius: 10px;
        .right-header{
            width: 100%;
            height: 50%;
            position: relative;
            .inp3{
              width: 30px;
              height: 35px;
              border: none;
              font-size: 26px;
              position: absolute;
              right: 20px;
              top: 16px;
              z-index: 3;
            }
          }
          .right-body{
            width: 100%;
            height: 50%;
            position: relative;
            bottom: 10px;
            .foot{
              width: 100%;
              height: 10%;
              margin: 0 auto;
              display: flex;
              justify-content: center;
              position: absolute;
              left: 0;
              bottom: 0px;
              .el-pagination{
                  justify-content: center;
              }
          }
      }
      }
   }
   .third-header{
    width: 100%;
    height: 260px;
    display: flex;
    justify-content: space-between;

    .echart{
      width: 32%;
      height: 260px;
      background-color: #fff;
      position: relative;
      .inp3{
              width: 30px;
              height: 35px;
              border: none;
              font-size: 26px;
              position: absolute;
              right: 20px;
              top: 16px;
              z-index: 3;
            }
    }
   }
   .third-body{
    width: 100%;
    height: 260px;
    background-color: #fff;
    margin-top: 30px;
   }
   .fourth{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
      .fourth-left{
        width: 48%;
        height: 555px;
        background-color: #fff;
        border-radius: 10px;
       .left-header{
            width: 100%;
            height: 50%;
            position: relative;
            .inp3{
              width: 30px;
              height: 35px;
              border: none;
              font-size: 26px;
              position: absolute;
              right: 20px;
              top: 16px;
              z-index: 3;
            }
          }
          .left-body{
            width: 100%;
            height: 50%;
            position: relative;
            bottom: 10px;
            .foot{
              width: 100%;
              height: 10%;
              margin: 0 auto;
              display: flex;
              justify-content: center;
              position: absolute;
              left: 0;
              bottom: 0px;
              .el-pagination{
                  justify-content: center;
              }
          }
      }
    }
      .fourth-right{
        width: 48%;
        height: 555px;
        background-color: #fff;
        border-radius: 10px;
        .right-header{
            width: 100%;
            height: 50%;
            position: relative;
            .inp3{
              width: 30px;
              height: 35px;
              border: none;
              font-size: 26px;
              position: absolute;
              right: 20px;
              top: 16px;
              z-index: 3;
            }
          }
          .right-body{
            width: 100%;
            height: 50%;
            position: relative;
            bottom: 10px;
            .foot{
              width: 100%;
              height: 10%;
              margin: 0 auto;
              display: flex;
              justify-content: center;
              position: absolute;
              left: 0;
              bottom: 0px;
              .el-pagination{
                  justify-content: center;
              }
          }
      }
      }
   }
   /deep/.el-table td.el-table__cell{
       border-bottom: none;
   }
   /deep/.el-table__inner-wrapper:before{
    display: none;
   }
   :deep(.el-table .cell){
    text-align: center;
   }
</style>